<script setup lang="ts">
import { toRef, ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import useAppStore from '@/store'
import { getMemberProfile, putMemberProfile } from '@/api/profile'
import { ProfileResult, Gender } from '@/types/profile'
import { useMemberStore } from '@/store/member'

// 定义用户信息数据源
const profileParams = ref({} as ProfileResult)
const memberStore = useMemberStore()
onLoad(async() => {
  profileParams.value = await getMemberProfile()
})

const appStore = useAppStore()
const safeArea = toRef(appStore, 'safeArea')

const goBack = () => {
  uni.navigateBack({})
}
// 注册修改用户头像方法
const chooseImage = () => {
  uni.chooseImage({
    // 选择图片
    count: 1,
    success: success => {
      // 获取用户上传的图片
      const filePath = success.tempFilePaths[0]
      // 将图片上传至服务器
      uni.uploadFile({
        url: '/member/profile/avatar',
        filePath: filePath,
        name: 'file',
        success: res => {
          // 修改头像
          profileParams.value.avatar = filePath
          // 保存头像地址至 pinia 中
          memberStore.profile.avatar = filePath
          // 提示修改成功
          uni.showToast({ title: '修改头像成功' })
        },
      })
    },
  })
}
// 注册性别修改方法
const genderChange = (res: WechatMiniprogram.RadioGroupChange) =>
  profileParams.value.gender = res.detail.value as Gender
// 注册修改出生日期方法
const birthdayChange = (res: WechatMiniprogram.PickerChange) =>
  profileParams.value.birthday = res.detail.value as string
// 定义保存 code 变量
let fullLocationCode: string[] = []
// 注册修改城市方法
const fullLocationChange = (res: WechatMiniprogram.PickerChange) => {
  profileParams.value.fullLocation = (res.detail.value as string[]).join(' ')
  fullLocationCode = res.detail.code
}
// 注册提交用户信息方法
const submitForm =  async() => {
  // 从对象中解构需要的数据
  const { nickname, gender, birthday, profession } = profileParams.value
  // 结构地址
  const [ provinceCode, cityCode, countyCode ] = fullLocationCode
  await putMemberProfile({
    nickname,
    gender,
    birthday,
    profession,
    provinceCode,
    cityCode,
    countyCode
  })
  uni.showToast({ title: '修改信息成功' })
  // 更新 pinia 中的昵称
  memberStore.profile.nickname = nickname
  // 跳转回上一个页面（我的）
  setTimeout(() => uni.navigateBack({ delta: 1 }), 500)
}
</script>

<template>
  <view class="viewport">
    <view class="navbar" :style="{ paddingTop: safeArea?.top + 'px' }">
      <view class="back icon-left" @tap="goBack"></view>
      <view class="title">个人信息</view>
    </view>
    <scroll-view scroll-y>
      <!-- 头像 -->
      <view class="avatar">
        <image mode="aspectFill" @tap="chooseImage" :src="profileParams.avatar" />
        <text>点击修改头像</text>
      </view>
      <!-- 用户信息 -->
      <view class="form">
        <view class="form-item">
          <text class="label">账号</text>
          <!-- <input :value="profileParams.account" disabled /> -->
          <text>{{ profileParams.account }}</text>
        </view>
        <view class="form-item">
          <text class="label">昵称</text>
          <input v-model="profileParams.nickname" />
        </view>
        <view class="form-item">
          <text class="label">性别</text>
          <radio-group @change="genderChange">
            <label class="radio">
              <radio value="男" color="#27ba9b" :checked="profileParams.gender === '男'" /> 男
            </label>
            <label class="radio">
              <radio value="女" color="#27ba9b" :checked="profileParams.gender === '女'" /> 女
            </label>
          </radio-group>
        </view>
        <view class="form-item">
          <text class="label">出生日期</text>
          <picker mode="date" start="1900-01-01" end="2023-10-01" :value="profileParams.birthday" @change="birthdayChange">
            <view>{{ profileParams.birthday || '请选择出生日期' }}</view>
          </picker>
        </view>
        <view class="form-item">
          <text class="label">城市</text>
          <picker mode="region" @change="fullLocationChange">
            <view>{{ profileParams.fullLocation || '请选择城市' }}</view>
          </picker>
        </view>
        <view class="form-item">
          <text class="label">职业</text>
          <input v-model="profileParams.profession" placeholder="请输入职业" />
        </view>
      </view>
      <!-- 提交按钮 -->
      <view class="button" @tap="submitForm">保 存</view>
    </scroll-view>
  </view>
</template>

<style>
page {
  height: 100%;
  overflow: hidden;
  background-color: #f4f4f4;
}

.viewport {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-image: url(https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/images/order_bg.png);
  background-size: auto 392rpx;
  background-repeat: no-repeat;
}

.navbar .title {
  height: 40px;
  line-height: 32px;
  text-align: center;
  font-size: 17px;
  font-weight: 500;
  color: #fff;
}

.navbar .back {
  position: absolute;
  left: 20rpx;
  top: 22px;
  font-size: 23px;
  z-index: 9;
  color: #fff;
}

.avatar {
  text-align: center;
  padding: 20rpx 0 40rpx;
}

.avatar image {
  width: 160rpx;
  height: 160rpx;
  border-radius: 50%;
}

.avatar text {
  display: block;
  padding-top: 20rpx;
  line-height: 1;
  font-size: 26rpx;
  color: #fff;
}

.form {
  margin: 20rpx 20rpx 0;
  padding: 0 20rpx;
  border-radius: 10rpx;
  background-color: #fff;
}

.form .form-item {
  display: flex;
  height: 96rpx;
  line-height: 46rpx;
  padding: 25rpx 10rpx;
  background-color: #fff;
  font-size: 28rpx;
  border-bottom: 1rpx solid #ddd;
}

.form .form-item:last-child {
  border: none;
}

.form .form-item .label {
  width: 180rpx;
  color: #333;
}

.form .form-item input {
  flex: 1;
  display: block;
  height: 46rpx;
}

.form .form-item .radio {
  display: inline-block;
  height: 46rpx;
  margin-right: 20rpx;
  vertical-align: middle;
}

.form .form-item radio {
  transform: scale(0.7) translateY(-2px);
}

.form .form-item picker {
  flex: 1;
}

.button {
  height: 80rpx;
  text-align: center;
  line-height: 80rpx;
  margin: 30rpx 20rpx;
  color: #fff;
  border-radius: 80rpx;
  font-size: 30rpx;
  background-color: #27ba9b;
}
</style>
